<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>BFC 规定块级子元素的排列</title>
	<link rel="stylesheet" href="http://coding.imweb.io/demo/reset.css">
	<style type="text/css">
		body {
			background: #fff;
		}
		.block {
			padding:10px;
            margin: 10px 0;
		}
		.block--1 {
			background: #81c2d6;
		}
		.block--2 {
			background: #8192d6;
		}
		.block--3 {
			background: #dcf7a1;
		}
        .block-child {
            background: #ccc;
            margin: 10px;
        }
	</style>
</head>
<body>
	<h1 class="block block--1">块级子元素 h1</h1>
	<p class="block block--2">块级子元素 p</p>
	<div class="block block--3">
        <div class="block-child">块级子元素 div1</div>
        <div class="block-child">块级子元素 div2</div>
    </div>
</body>
</html>


